---
title: Déployer votre site Astro avec Deno
description: Comment déployer votre site Astro sur le web en utilisant Deno.
sidebar:
  label: Deno Deploy
type: deploy
logo: deno
supports: ['ssr', 'static']
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Vous pouvez déployer un site Astro statique ou rendu à la demande à l'aide de Deno, soit sur votre propre serveur, soit sur [Deno Deploy](https://deno.com/deploy), un système distribué qui exécute JavaScript, TypeScript et WebAssembly à la pointe de la technologie, dans le monde entier.

Ce guide comprend des instructions pour exécuter votre site Astro sur votre propre serveur avec Deno et le déployer sur Deno Deploy via GitHub Actions ou la CLI de Deno Deploy.

## Prérequis

Ce guide suppose que vous avez déjà installé [Deno](https://deno.com/).

## Configuration du projet

Votre projet Astro peut être déployé en tant que site statique ou en tant que site rendu à la demande.

### Site statique

Votre projet Astro est un site statique par défaut. Aucune configuration supplémentaire n'est requise pour déployer un site Astro statique avec Deno ou Deno Deploy.

### Adaptateur pour le rendu à la demande

Pour activer le rendu à la demande dans votre projet Astro à l'aide de Deno et pour déployer sur Deno Deploy :

<Steps>
1. Installez [l'adaptateur `@deno/astro-adapter`][Deno adapter] dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @deno/astro-adapter
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm install @deno/astro-adapter
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @deno/astro-adapter
     ```
     </Fragment>
   </PackageManagerTabs>

2. Mettez à jour le fichier de configuration de votre projet `astro.config.mjs` avec les changements ci-dessous.

     ```js ins={3,6-7}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@deno/astro-adapter';

    export default defineConfig({
      output: 'server',
      adapter: deno(),
    });
    ```

3. Mettez à jour le script `preview` dans votre fichier `package.json` avec la modification ci-dessous.

    ```json del={8} ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
      }
    }
    ```

    Vous pouvez maintenant utiliser cette commande pour prévisualiser votre site Astro de façon locale avec Deno.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run preview
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run preview
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run preview
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## Comment déployer

Vous pouvez déployer Deno Deploy via les actions GitHub ou en utilisant l'interface de ligne de commande (CLI) de Deno Deploy.

### Sur votre propre serveur

<Steps>
1. Copiez votre projet sur votre serveur.

2. Installez les dépendances du projet à l’aide de votre gestionnaire de paquets préféré :
   
   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm install
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn
     ```
     </Fragment>
   </PackageManagerTabs>

3. Compilez votre site Astro avec votre gestionnaire de paquets préféré :

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm run build
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm run build
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn run build
     ```
     </Fragment>
   </PackageManagerTabs>

4. Démarrez votre application avec la commande suivante :

   <StaticSsrTabs>
     <Fragment slot="static">
       ```bash
       deno run -A jsr:@std/http/file-server dist
       ```
     </Fragment>
     
     <Fragment slot="ssr">
       ```bash
       deno run -A ./dist/server/entry.mjs
       ```
     </Fragment>
   </StaticSsrTabs>
</Steps>

### Déploiement avec les actions GitHub

Si votre projet est stocké sur GitHub, le [site Deno Deploy](https://dash.deno.com/) vous guidera dans la mise en place des actions GitHub pour déployer votre site Astro.

<Steps>
1. Poussez votre code vers un dépôt GitHub public ou privé.

2. Connectez-vous sur [Deno Deploy](https://dash.deno.com/) avec votre compte GitHub, et cliquez sur [New Project](https://dash.deno.com).

3. Sélectionnez votre dépôt, la branche à partir de laquelle vous voulez déployer, et sélectionnez le mode **GitHub Action**. (Votre site Astro nécessite une étape de compilation, et ne peut pas utiliser le mode Automatique).

4. Dans votre projet Astro, créez un nouveau fichier `.github/workflows/deploy.yml` et collez le YAML ci-dessous. Ceci est similaire au YAML donné par Deno Deploy, avec les étapes supplémentaires nécessaires pour votre site Astro.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Déploiement
        on: [push]

        jobs:
          deploy:
            name: Déploiement
            runs-on: ubuntu-latest
            permissions:
              id-token: write # Nécessaire pour l'authentification avec Deno Deploy
              contents: read # Nécessaire pour cloner le dépôt

            steps:
              - name: Clonage du dépôt
                uses: actions/checkout@v4

              # Vous n'utilisez pas npm ? Remplacez `npm ci` par `yarn install` ou `pnpm i`
              - name: Installation des dépendances
                run: npm ci

              # Vous n'utilisez pas npm ? Remplacez `npm run build` par `yarn build` ou `pnpm run build`.
              - name: Construction du site Astro
                run: npm run build

              - name: Téléchargement vers Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO : remplacer par le nom du projet Deno Deploy
                  entrypoint: jsr:@std/http/file-server
                  root: dist
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Déploiement
        on: [push]

        jobs:
          deploy:
            name: Déploiement
            runs-on: ubuntu-latest
            permissions:
              id-token: write # Nécessaire pour l'authentification avec Deno Deploy
              contents: read # Nécessaire pour cloner le dépôt

            steps:
              - name: Clonage du dépôt
                uses: actions/checkout@v4

              # Vous n'utilisez pas npm ? Remplacez `npm ci` par `yarn install` ou `pnpm i`
              - name:Installation des dépendances
                run: npm ci

              # Vous n'utilisez pas npm ? Remplacez `npm run build` par `yarn build` ou `pnpm run build`.
              - name: Construction du site Astro
                run: npm run build

              - name: Téléchargement vers Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO : remplacer par le nom du projet Deno Deploy
                  entrypoint: dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>

5. Après avoir validé ce fichier YAML et l'avoir poussé sur GitHub sur la branche de déploiement configurée, le déploiement devrait commencer automatiquement !

    Vous pouvez suivre la progression en utilisant l'onglet « Actions » sur votre page de dépôt GitHub, ou sur [Deno Deploy](https://dash.deno.com).
</Steps>

### Déploiement CLI

<Steps>
1. Installez la [CLI de Deno Deploy](https://docs.deno.com/deploy/manual/deployctl).

    ```bash
    deno install -gArf jsr:@deno/deployctl
    ```

2. Créez votre site Astro avec votre gestionnaire de paquets préféré :

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm run build
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm run build
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn run build
     ```
     </Fragment>
   </PackageManagerTabs>

3. Exécutez `deployctl` pour déployer !

    <StaticSsrTabs>
      <Fragment slot="static">
        ```bash
        cd dist && deployctl deploy jsr:@std/http/file-server
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```bash
        deployctl deploy ./dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>

    Vous pouvez suivre tous vos déploiements sur [Deno Deploy](https://dash.deno.com).

4. (Optionnel) Pour simplifier la compilation et le déploiement en une seule commande, ajoutez un script `deploy-deno` dans `package.json`.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```json ins={9}
        // package.json
        {
          // ...
          "scripts": {
          "dev": "astro dev",
          "start": "astro dev",
          "build": "astro build",
          "preview": "astro preview",
          "deno-deploy": "npm run build && cd dist && deployctl deploy jsr:@std/http/file-server"
          }
        }
        ```
      </Fragment>
      <Fragment slot="ssr">
    ```json ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
        "deno-deploy": "npm run build && deployctl deploy ./dist/server/entry.mjs"
      }
    }
    ```
      </Fragment>
    </StaticSsrTabs>

    Vous pouvez alors utiliser cette commande pour compiler et déployer votre site Astro en une seule étape.

    ```bash
    npm run deno-deploy
    ```
</Steps>

[Deno adapter]: https://github.com/denoland/deno-astro-adapter
